<template>
  <div>
    <h1>请点击下方观看视频 ⬇ </h1>
   
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.17/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js"></script>
    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
    
  </div>
</template>




<script>
import vod from '@/api/vod' 

export default {
  
  // layout: 'video',//应用video布局   
  asyncData({ params, error }) {

    return vod.getPlayAuth(params.vid).then(response => {
      console.log(response.data.data)      
       return {         
            vid: params.vid,
            playAuth: response.data.data.playAuth
      }
    })
  },
  mounted() {     
    new Aliplayer({        
         id: 'J_prismPlayer',   
            height: "500px",
            width: '100%',    
            // innerHeight:'40',      
            autoplay: false,    
           
            vid: this.vid, // 视频id
            playauth: this.playAuth, // 播放凭证    
            cover: 'https://online-teach-file.oss-cn-beijing.aliyuncs.com/teacher/2019/10/30/de47ee9b-7fec-43c5-8173-13c5f7f689b2.png',  
            //播放配置
            //  source : 'https://outin-1853a8e3608711ec855d00163e1c60dc.oss-cn-shanghai.aliyuncs.com/sv/3db718be-17dd26942be/3db718be-17dd26942be.mp4?Expires=1640320777&OSSAccessKeyId=LTAIVVfYx6D0HeL2&Signature=wQqe3duwh%2BSLKgNMdTAPoiBKn8Q%3D',
            cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面 
            qualitySort: 'asc', // 清晰度排序
            mediaType: 'video', // 返回音频还是视频 
            autoplay: false, // 自动播放 
            isLive: false, // 直播 
            rePlay: false, // 循环播放 
            preload: true,
            controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
            useH5Prism: true, // 播放器类型：html5  
          }, function(player) {      
           console.log('播放器创建成功')
           console.log(vod.getPlayAuth(params.vid)) 
    })
}
}
</script>

